<!--
*
*  INSPINIA - Responsive Admin Theme
*  version 2.7
*
-->


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      xmlns:shiro="http://www.w3.org/1999/xhtml">

<head th:include="common/Head :: headCss"></head>

<body>
<div id="wrapper">
    <nav th:include="common/Left_Ment :: left"></nav>
    <div id="page-wrapper" class="gray-bg dashbard-1">
        <div th:include="common/Head :: head"></div>
        <!--<div class="ibox float-e-margins" id="div3" name="div3" style="display: none">-->
        <div class="row  border-bottom white-bg dashboard-header"  id="div6" name="div6" style="display: none">
            <!--<div class="col-lg-4" id="div4" name="div4" style="display: none">-->
            <div class="col-md-3">
                <h2></h2>
                <small>您有42条消息和6条通知。</small>
                <ul class="list-group clear-list m-t">
                    <li class="list-group-item fist-item">
                                <span class="pull-right">
                                    下午 09:00
                                </span>
                        <span class="label label-success">1</span> 请联系我
                    </li>
                    <li class="list-group-item">
                                <span class="pull-right">
                                    上午 10:16
                                </span>
                        <span class="label label-info">2</span> 签订合同
                    </li>
                    <li class="list-group-item">
                                <span class="pull-right">
                                    下午 08:22
                                </span>
                        <span class="label label-primary">3</span> 开新店
                    </li>
                    <li class="list-group-item">
                                <span class="pull-right">
                                    下午 11:06
                                </span>
                        <span class="label label-default">4</span> 回电给西尔维亚
                    </li>
                    <li class="list-group-item">
                                <span class="pull-right">
                                    上午 12:00
                                </span>
                        <span class="label label-primary">5</span> 给桑德拉写封信
                    </li>
                </ul>
            </div>
            <div class="col-md-6">
                <div class="flot-chart dashboard-chart">
                    <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                </div>
                <div class="row text-left">
                    <div class="col-xs-4">
                        <div class=" m-l-md">
                            <span class="h4 font-bold m-t block">$ 406,100</span>
                            <small class="text-muted m-b block">销售营销报告</small>
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <span class="h4 font-bold m-t block">$ 150,401</span>
                        <small class="text-muted m-b block">年销售收入</small>
                    </div>
                    <div class="col-xs-4">
                        <span class="h4 font-bold m-t block">$ 16,822</span>
                        <small class="text-muted m-b block">半年收益率</small>
                    </div>

                </div>
            </div>
            <div class="col-md-3">
                <div class="statistic-box">
                    <h2>
                        项目测试进度
                    </h2>
                    <p>
                        有两个项目没有完成任务。
                    </p>
                    <div class="row text-center">
                        <div class="col-lg-6">
                            <canvas id="doughnutChart2" width="80" height="80" style="margin: 18px auto 0"></canvas>
                            <h5>科尔特</h5>
                        </div>
                        <div class="col-lg-6">
                            <canvas id="doughnutChart" width="80" height="80" style="margin: 18px auto 0"></canvas>
                            <h5>迈克托</h5>
                        </div>
                    </div>
                    <div class="m-t">
                        <small>洛雷姆只是印刷和排版行业的一个虚拟文本。</small>
                    </div>

                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="wrapper wrapper-content">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="ibox float-e-margins" id="div2" name="div2" style="display: none">
                                <div class="ibox-title">
                                    <h2>报告的新数据</h2> <span class="label label-primary">IN+</span>
                                    <!--<div class="ibox-tools">-->
                                        <!--<a class="collapse-link">-->
                                            <!--<i class="fa fa-chevron-up"></i>-->
                                        <!--</a>-->
                                        <!--<a class="dropdown-toggle" data-toggle="dropdown" href="#">-->
                                            <!--<i class="fa fa-wrench"></i>-->
                                        <!--</a>-->
                                        <!--<ul class="dropdown-menu dropdown-user">-->
                                            <!--<li><a href="#">Config option 1</a>-->
                                            <!--</li>-->
                                            <!--<li><a href="#">Config option 2</a>-->
                                            <!--</li>-->
                                        <!--</ul>-->
                                        <!--<a class="close-link">-->
                                            <!--<i class="fa fa-times"></i>-->
                                        <!--</a>-->
                                    <!--</div>-->
                                </div>
                                <div class="ibox-content">
                                    <div>

                                        <div class="pull-right text-right">

                                            <span class="bar_dashboard">5,3,9,6,5,9,7,3,5,2,4,7,3,2,7,9,6,4,5,7,3,2,1,0,9,5,6,8,3,2,1</span>
                                            <br/>
                                            <small class="font-bold">$ 20 054.43</small>
                                        </div>
                                        <h4>纽约证券交易所报告新数据！
                                            <br/>
                                            <small class="m-r"><a href="graph_flot.html"> 查看股票价格！ </a>
                                            </small>
                                        </h4>
                                    </div>
                                </div>
                            </div>
                            <div class="ibox float-e-margins" id="div3" name="div3" style="display: none">
                                <div class="ibox-title">
                                    <h2> 阅读下面的评论</h2>
                                    <!--<div class="ibox-tools">-->
                                        <!--<a class="collapse-link">-->
                                            <!--<i class="fa fa-chevron-up"></i>-->
                                        <!--</a>-->
                                        <!--<a class="dropdown-toggle" data-toggle="dropdown" href="#">-->
                                            <!--<i class="fa fa-wrench"></i>-->
                                        <!--</a>-->
                                        <!--<ul class="dropdown-menu dropdown-user">-->
                                            <!--<li><a href="#">Config option 1</a>-->
                                            <!--</li>-->
                                            <!--<li><a href="#">Config option 2</a>-->
                                            <!--</li>-->
                                        <!--</ul>-->
                                        <!--<a class="close-link">-->
                                            <!--<i class="fa fa-times"></i>-->
                                        <!--</a>-->
                                    <!--</div>-->
                                </div>
                                <div class="ibox-content no-padding">
                                    <ul class="list-group">
                                        <li class="list-group-item">
                                            <p><a class="text-info" href="#">@艾伦·玛丽</a> 我相信。洛雷姆只是印刷和排版行业的一个虚拟文本。</p>
                                            <small class="block text-muted"><i class="fa fa-clock-o"></i> 1 分钟前
                                            </small>
                                        </li>
                                        <li class="list-group-item">
                                            <p><a class="text-info" href="#">@股票经纪人</a> 检查这个库存表。这个价格太疯狂了！ </p>
                                            <div class="text-center m">
                                                <span id="sparkline8"></span>
                                            </div>
                                            <small class="block text-muted"><i class="fa fa-clock-o"></i> 2 小时前
                                            </small>
                                        </li>
                                        <li class="list-group-item">
                                            <p><a class="text-info" href="#">@凯文·史密斯</a> 洛雷姆·伊普索姆未知的打印机拿走了一个厨房 </p>
                                            <small class="block text-muted"><i class="fa fa-clock-o"></i> 2 分钟前
                                            </small>
                                        </li>
                                        <li class="list-group-item ">
                                            <p><a class="text-info" href="#">@乔纳森·费布里克</a> 洛伦的标准块</p>
                                            <small class="block text-muted"><i class="fa fa-clock-o"></i> 1 小时前
                                            </small>
                                        </li>
                                        <li class="list-group-item">
                                            <p><a class="text-info" href="#">@艾伦·玛丽</a> 我相信。洛雷姆只是印刷和排版行业的一个虚拟文本。</p>
                                            <small class="block text-muted"><i class="fa fa-clock-o"></i> 1 分钟前
                                            </small>
                                        </li>
                                        <li class="list-group-item">
                                            <p><a class="text-info" href="#">@凯文·史密斯</a> 洛雷姆·伊普索姆未知的打印机拿走了一个厨房 </p>
                                            <small class="block text-muted"><i class="fa fa-clock-o"></i> 2 分钟前
                                            </small>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4" id="div4" name="div4" style="display: none">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h2>你的每日饲料</h2>
                                    <div class="ibox-tools">
                                        <span class="label label-warning-light pull-right">10 Messages</span>
                                    </div>
                                </div>
                                <div class="ibox-content">

                                    <div>
                                        <div class="feed-activity-list">

                                            <div class="feed-element">
                                                <a href="profile.html" class="pull-left">
                                                    <img alt="image" class="img-circle" src="bootstrap/img/profile.jpg">
                                                </a>
                                                <div class="media-body ">
                                                    <small class="pull-right">五年前</small>
                                                    <strong>莫妮卡·史密斯</strong> p发布了一个新博客。<br>
                                                    <small class="text-muted">今天下午5:60-2014年6月12日</small>

                                                </div>
                                            </div>

                                            <div class="feed-element">
                                                <a href="profile.html" class="pull-left">
                                                    <img alt="image" class="img-circle" src="bootstrap/img/a2.jpg">
                                                </a>
                                                <div class="media-body ">
                                                    <small class="pull-right">2小时前</small>
                                                    <strong>马克·约翰逊</strong> 在 <strong>莫妮卡·史密斯</strong> 网站上发布消息。 <br>
                                                    <small class="text-muted">今天下午2:10-2014年6月12日</small>
                                                </div>
                                            </div>
                                            <div class="feed-element">
                                                <a href="profile.html" class="pull-left">
                                                    <img alt="image" class="img-circle" src="bootstrap/img/a3.jpg">
                                                </a>
                                                <div class="media-body ">
                                                    <small class="pull-right">2小时前</small>
                                                    <strong>珍妮特·罗索夫斯基</strong> 在 <strong>莫妮卡·史密斯</strong>上添加1张照片。 <br>
                                                    <small class="text-muted">2天前8:30</small>
                                                </div>
                                            </div>
                                            <div class="feed-element">
                                                <a href="profile.html" class="pull-left">
                                                    <img alt="image" class="img-circle" src="bootstrap/img/a4.jpg">
                                                </a>
                                                <div class="media-body ">
                                                    <small class="pull-right text-navy">5小时前</small>
                                                    <strong>克里斯·约翰纳坦·奥图克</strong> 开始跟踪<strong>莫妮卡·史密斯</strong>. <br>
                                                    <small class="text-muted">昨天下午1:21-2014年6月11日</small>
                                                    <div class="actions">
                                                        <a class="btn btn-xs btn-white"><i class="fa fa-thumbs-up"></i>
                                                            喜欢 </a>
                                                        <a class="btn btn-xs btn-white"><i class="fa fa-heart"></i> 喜爱</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="feed-element">
                                                <a href="profile.html" class="pull-left">
                                                    <img alt="image" class="img-circle" src="bootstrap/img/a5.jpg">
                                                </a>
                                                <div class="media-body ">
                                                    <small class="pull-right">2小时前</small>
                                                    <strong>金史密斯</strong>在 <strong>莫妮卡·史密斯</strong> 网站上发布消息。 <br>
                                                    <small class="text-muted">昨天下午5:20-2014年6月12日</small>
                                                    <div class="well">
                                                        洛雷姆只是印刷和排版行业的一个虚拟文本。从15世纪以来一直是业界标准的虚拟文本，多年来，有时是偶然的，有时是有意的（注入幽默等）。
                                                    </div>
                                                    <div class="pull-right">
                                                        <a class="btn btn-xs btn-white"><i class="fa fa-thumbs-up"></i>
                                                            喜欢 </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="feed-element">
                                                <a href="profile.html" class="pull-left">
                                                    <img alt="image" class="img-circle" src="bootstrap/img/profile.jpg">
                                                </a>
                                                <div class="media-body ">
                                                    <small class="pull-right">23小时前</small>
                                                    <strong>莫妮卡·史密斯</strong> 喜爱 <strong>金史密斯</strong>. <br>
                                                    <small class="text-muted">2天前2:30</small>
                                                </div>
                                            </div>
                                            <div class="feed-element">
                                                <a href="profile.html" class="pull-left">
                                                    <img alt="image" class="img-circle" src="bootstrap/img/a7.jpg">
                                                </a>
                                                <div class="media-body ">
                                                    <small class="pull-right">46小时前</small>
                                                    <strong>迈克·洛里普苏</strong> 开始于追求 <strong>莫妮卡·史密斯</strong>. <br>
                                                    <small class="text-muted">3天前</small>
                                                </div>
                                            </div>
                                        </div>

                                        <button class="btn btn-primary btn-block m-t"><i class="fa fa-arrow-down"></i>
                                            显示更多
                                        </button>

                                    </div>

                                </div>
                            </div>

                        </div>
                        <div class="col-lg-4" id="div5" name="div5" style="display: none">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h2> 阿尔法项目</h2>
                                    <!--<div class="ibox-tools">-->
                                        <!--<a class="collapse-link">-->
                                            <!--<i class="fa fa-chevron-up"></i>-->
                                        <!--</a>-->
                                        <!--<a class="dropdown-toggle" data-toggle="dropdown" href="#">-->
                                            <!--<i class="fa fa-wrench"></i>-->
                                        <!--</a>-->
                                        <!--<ul class="dropdown-menu dropdown-user">-->
                                            <!--<li><a href="#">Config option 1</a>-->
                                            <!--</li>-->
                                            <!--<li><a href="#">Config option 2</a>-->
                                            <!--</li>-->
                                        <!--</ul>-->
                                        <!--<a class="close-link">-->
                                            <!--<i class="fa fa-times"></i>-->
                                        <!--</a>-->
                                    <!--</div>-->
                                </div>
                                <div class="ibox-content ibox-heading">
                                    <h3>你今天有个会议</h3>
                                    <small><i class="fa fa-map-marker"></i> 会议在早上6点举行。查看您的日程以查看详细信息。
                                    </small>
                                </div>
                                <div class="ibox-content inspinia-timeline">

                                    <div class="timeline-item">
                                        <div class="row">
                                            <div class="col-xs-3 date">
                                                <i class="fa fa-briefcase"></i>
                                                上午6:00
                                                <br/>
                                                <small class="text-navy">2 小时前</small>
                                            </div>
                                            <div class="col-xs-7 content no-top-border">
                                                <p class="m-b-xs"><strong>会议</strong></p>

                                                <p>上一年度销售业绩会议。莫妮卡请检查市场营销和产品的销售趋势。请在下面找到销售的当前状态。</p>

                                                <p><span data-diameter="40" class="updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,4,7,3,2,9,8,7,4,5,1,2,9,5,4,7,2,7,7,3,5,2</span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="timeline-item">
                                        <div class="row">
                                            <div class="col-xs-3 date">
                                                <i class="fa fa-file-text"></i>
                                               上午7:00
                                                <br/>
                                                <small class="text-navy">3 小时前</small>
                                            </div>
                                            <div class="col-xs-7 content">
                                                <p class="m-b-xs"><strong>将文档发送给迈克</strong></p>
                                                <p>洛雷姆只是印刷和排版行业的一个虚拟文本。从那时起，乱数假文就成了业界标准的虚拟文本。</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="timeline-item">
                                        <div class="row">
                                            <div class="col-xs-3 date">
                                                <i class="fa fa-coffee"></i>
                                              上午8:00
                                                <br/>
                                            </div>
                                            <div class="col-xs-7 content">
                                                <p class="m-b-xs"><strong>咖啡休息时间</strong></p>
                                                <p>
                                                    去商店买些产品。洛雷姆只是印刷和排版行业的一个虚拟文本。一直是该行业的。
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="timeline-item">
                                        <div class="row">
                                            <div class="col-xs-3 date">
                                                <i class="fa fa-phone"></i>
                                                上午11:00
                                                <br/>
                                                <small class="text-navy">21 小时前</small>
                                            </div>
                                            <div class="col-xs-7 content">
                                                <p class="m-b-xs"><strong>与杰罗尼莫联系</strong></p>
                                                <p>
                                                    那时起，杰罗尼莫就成了业界标准的虚拟文本。
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="timeline-item">
                                        <div class="row">
                                            <div class="col-xs-3 date">
                                                <i class="fa fa-user-md"></i>
                                                下午09:00
                                                <br/>
                                                <small>21 小时前</small>
                                            </div>
                                            <div class="col-xs-7 content">
                                                <p class="m-b-xs"><strong>去医院看医生</strong></p>
                                                <p>
                                                    询问医生一些问题
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="timeline-item">
                                        <div class="row">
                                            <div class="col-xs-3 date">
                                                <i class="fa fa-comments"></i>
                                                下午12:50
                                                <br/>
                                                <small class="text-navy">48小时前</small>
                                            </div>
                                            <div class="col-xs-7 content">
                                                <p class="m-b-xs"><strong>与莫妮卡和桑德拉聊天</strong></p>
                                                <p>
                                                    网站还处于初级阶段。在过去的几年里，各种各样的版本不断演变，有时是偶然的，有时是故意的。
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <!--<div class="footer">-->
                    <!--<div class="pull-right">-->
                        <!--10GB of <strong>250GB</strong> Free.-->
                    <!--</div>-->
                    <!--<div>-->
                        <!--<strong>Copyright</strong> Example Company &copy; 2014-2017-->
                    <!--</div>-->
                <!--</div>-->
            </div>
        </div>

    </div>
    <div class="small-chat-box fadeInRight animated">

        <div class="heading" draggable="true">
            <small class="chat-date pull-right">
                02.19.2015
            </small>
            Small chat
        </div>

        <div class="content">

            <div class="left">
                <div class="author-name">
                    Monica Jackson
                    <small class="chat-date">
                        10:02 am
                    </small>
                </div>
                <div class="chat-message active">
                    Lorem Ipsum is simply dummy text input.
                </div>

            </div>
            <div class="right">
                <div class="author-name">
                    Mick Smith
                    <small class="chat-date">
                        11:24 am
                    </small>
                </div>
                <div class="chat-message">
                    Lorem Ipsum is simpl.
                </div>
            </div>
            <div class="left">
                <div class="author-name">
                    Alice Novak
                    <small class="chat-date">
                        08:45 pm
                    </small>
                </div>
                <div class="chat-message active">
                    Check this stock char.
                </div>
            </div>
            <div class="right">
                <div class="author-name">
                    Anna Lamson
                    <small class="chat-date">
                        11:24 am
                    </small>
                </div>
                <div class="chat-message">
                    The standard chunk of Lorem Ipsum
                </div>
            </div>
            <div class="left">
                <div class="author-name">
                    Mick Lane
                    <small class="chat-date">
                        08:45 pm
                    </small>
                </div>
                <div class="chat-message active">
                    I belive that. Lorem Ipsum is simply dummy text.
                </div>
            </div>


        </div>
        <div class="form-chat">
            <div class="input-group input-group-sm">
                <input type="text" class="form-control">
                <span class="input-group-btn"> <button
                        class="btn btn-primary" type="button">Send
                </button> </span></div>
        </div>

    </div>
    <div id="small-chat">

        <span class="badge badge-warning pull-right">5</span>
        <a class="open-small-chat">
            <i class="fa fa-comments"></i>

        </a>
    </div>
    <div id="right-sidebar" class="animated">
        <div class="sidebar-container">

            <ul class="nav nav-tabs navs-3">

                <li class="active"><a data-toggle="tab" href="#tab-1">
                    Notes
                </a></li>
                <li><a data-toggle="tab" href="#tab-2">
                    Projects
                </a></li>
                <li class=""><a data-toggle="tab" href="#tab-3">
                    <i class="fa fa-gear"></i>
                </a></li>
            </ul>

            <div class="tab-content">


                <div id="tab-1" class="tab-pane active">

                    <div class="sidebar-title">
                        <h3><i class="fa fa-comments-o"></i> Latest Notes</h3>
                        <small><i class="fa fa-tim"></i> You have 10 new message.</small>
                    </div>

                    <div>

                        <div class="sidebar-message">
                            <a href="#">
                                <div class="pull-left text-center">
                                    <img alt="image" class="img-circle message-avatar" src="bootstrap/img/a1.jpg">

                                    <div class="m-t-xs">
                                        <i class="fa fa-star text-warning"></i>
                                        <i class="fa fa-star text-warning"></i>
                                    </div>
                                </div>
                                <div class="media-body">

                                    There are many variations of passages of Lorem Ipsum available.
                                    <br>
                                    <small class="text-muted">Today 4:21 pm</small>
                                </div>
                            </a>
                        </div>
                        <div class="sidebar-message">
                            <a href="#">
                                <div class="pull-left text-center">
                                    <img alt="image" class="img-circle message-avatar" src="bootstrap/img/a2.jpg">
                                </div>
                                <div class="media-body">
                                    The point of using Lorem Ipsum is that it has a more-or-less normal.
                                    <br>
                                    <small class="text-muted">Yesterday 2:45 pm</small>
                                </div>
                            </a>
                        </div>
                        <div class="sidebar-message">
                            <a href="#">
                                <div class="pull-left text-center">
                                    <img alt="image" class="img-circle message-avatar" src="bootstrap/img/a3.jpg">

                                    <div class="m-t-xs">
                                        <i class="fa fa-star text-warning"></i>
                                        <i class="fa fa-star text-warning"></i>
                                        <i class="fa fa-star text-warning"></i>
                                    </div>
                                </div>
                                <div class="media-body">
                                    Mevolved over the years, sometimes by accident, sometimes on purpose (injected
                                    humour and the like).
                                    <br>
                                    <small class="text-muted">Yesterday 1:10 pm</small>
                                </div>
                            </a>
                        </div>
                        <div class="sidebar-message">
                            <a href="#">
                                <div class="pull-left text-center">
                                    <img alt="image" class="img-circle message-avatar" src="bootstrap/img/a4.jpg">
                                </div>

                                <div class="media-body">
                                    Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
                                    <br>
                                    <small class="text-muted">Monday 8:37 pm</small>
                                </div>
                            </a>
                        </div>
                        <div class="sidebar-message">
                            <a href="#">
                                <div class="pull-left text-center">
                                    <img alt="image" class="img-circle message-avatar" src="bootstrap/img/a8.jpg">
                                </div>
                                <div class="media-body">

                                    All the Lorem Ipsum generators on the Internet tend to repeat.
                                    <br>
                                    <small class="text-muted">Today 4:21 pm</small>
                                </div>
                            </a>
                        </div>
                        <div class="sidebar-message">
                            <a href="#">
                                <div class="pull-left text-center">
                                    <img alt="image" class="img-circle message-avatar" src="bootstrap/img/a7.jpg">
                                </div>
                                <div class="media-body">
                                    Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
                                    from a line in section 1.10.32.
                                    <br>
                                    <small class="text-muted">Yesterday 2:45 pm</small>
                                </div>
                            </a>
                        </div>
                        <div class="sidebar-message">
                            <a href="#">
                                <div class="pull-left text-center">
                                    <img alt="image" class="img-circle message-avatar" src="bootstrap/img/a3.jpg">

                                    <div class="m-t-xs">
                                        <i class="fa fa-star text-warning"></i>
                                        <i class="fa fa-star text-warning"></i>
                                        <i class="fa fa-star text-warning"></i>
                                    </div>
                                </div>
                                <div class="media-body">
                                    The standard chunk of Lorem Ipsum used since the 1500s is reproduced below.
                                    <br>
                                    <small class="text-muted">Yesterday 1:10 pm</small>
                                </div>
                            </a>
                        </div>
                        <div class="sidebar-message">
                            <a href="#">
                                <div class="pull-left text-center">
                                    <img alt="image" class="img-circle message-avatar" src="bootstrap/img/a4.jpg">
                                </div>
                                <div class="media-body">
                                    Uncover many web sites still in their infancy. Various versions have.
                                    <br>
                                    <small class="text-muted">Monday 8:37 pm</small>
                                </div>
                            </a>
                        </div>
                    </div>

                </div>

                <div id="tab-2" class="tab-pane">

                    <div class="sidebar-title">
                        <h3><i class="fa fa-cube"></i> Latest projects</h3>
                        <small><i class="fa fa-tim"></i> You have 14 projects. 10 not completed.</small>
                    </div>

                    <ul class="sidebar-list">
                        <li>
                            <a href="#">
                                <div class="small pull-right m-t-xs">9 hours ago</div>
                                <h4>Business valuation</h4>
                                It is a long established fact that a reader will be distracted.

                                <div class="small">Completion with: 22%</div>
                                <div class="progress progress-mini">
                                    <div style="width: 22%;" class="progress-bar progress-bar-warning"></div>
                                </div>
                                <div class="small text-muted m-t-xs">Project end: 4:00 pm - 12.06.2014</div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="small pull-right m-t-xs">9 hours ago</div>
                                <h4>Contract with Company </h4>
                                Many desktop publishing packages and web page editors.

                                <div class="small">Completion with: 48%</div>
                                <div class="progress progress-mini">
                                    <div style="width: 48%;" class="progress-bar"></div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="small pull-right m-t-xs">9 hours ago</div>
                                <h4>Meeting</h4>
                                By the readable content of a page when looking at its layout.

                                <div class="small">Completion with: 14%</div>
                                <div class="progress progress-mini">
                                    <div style="width: 14%;" class="progress-bar progress-bar-info"></div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="label label-primary pull-right">NEW</span>
                                <h4>The generated</h4>
                                There are many variations of passages of Lorem Ipsum available.
                                <div class="small">Completion with: 22%</div>
                                <div class="small text-muted m-t-xs">Project end: 4:00 pm - 12.06.2014</div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="small pull-right m-t-xs">9 hours ago</div>
                                <h4>Business valuation</h4>
                                It is a long established fact that a reader will be distracted.

                                <div class="small">Completion with: 22%</div>
                                <div class="progress progress-mini">
                                    <div style="width: 22%;" class="progress-bar progress-bar-warning"></div>
                                </div>
                                <div class="small text-muted m-t-xs">Project end: 4:00 pm - 12.06.2014</div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="small pull-right m-t-xs">9 hours ago</div>
                                <h4>Contract with Company </h4>
                                Many desktop publishing packages and web page editors.

                                <div class="small">Completion with: 48%</div>
                                <div class="progress progress-mini">
                                    <div style="width: 48%;" class="progress-bar"></div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="small pull-right m-t-xs">9 hours ago</div>
                                <h4>Meeting</h4>
                                By the readable content of a page when looking at its layout.

                                <div class="small">Completion with: 14%</div>
                                <div class="progress progress-mini">
                                    <div style="width: 14%;" class="progress-bar progress-bar-info"></div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="label label-primary pull-right">NEW</span>
                                <h4>The generated</h4>
                                <!--<div class="small pull-right m-t-xs">9 hours ago</div>-->
                                There are many variations of passages of Lorem Ipsum available.
                                <div class="small">Completion with: 22%</div>
                                <div class="small text-muted m-t-xs">Project end: 4:00 pm - 12.06.2014</div>
                            </a>
                        </li>

                    </ul>

                </div>

                <div id="tab-3" class="tab-pane">

                    <div class="sidebar-title">
                        <h3><i class="fa fa-gears"></i> Settings</h3>
                        <small><i class="fa fa-tim"></i> You have 14 projects. 10 not completed.</small>
                    </div>

                    <div class="setings-item">
                    <span>
                        Show notifications
                    </span>
                        <div class="switch">
                            <div class="onoffswitch">
                                <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="example">
                                <label class="onoffswitch-label" for="example">
                                    <span class="onoffswitch-inner"></span>
                                    <span class="onoffswitch-switch"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="setings-item">
                    <span>
                        Disable Chat
                    </span>
                        <div class="switch">
                            <div class="onoffswitch">
                                <input type="checkbox" name="collapsemenu" checked class="onoffswitch-checkbox"
                                       id="example2">
                                <label class="onoffswitch-label" for="example2">
                                    <span class="onoffswitch-inner"></span>
                                    <span class="onoffswitch-switch"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="setings-item">
                    <span>
                        Enable history
                    </span>
                        <div class="switch">
                            <div class="onoffswitch">
                                <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="example3">
                                <label class="onoffswitch-label" for="example3">
                                    <span class="onoffswitch-inner"></span>
                                    <span class="onoffswitch-switch"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="setings-item">
                    <span>
                        Show charts
                    </span>
                        <div class="switch">
                            <div class="onoffswitch">
                                <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="example4">
                                <label class="onoffswitch-label" for="example4">
                                    <span class="onoffswitch-inner"></span>
                                    <span class="onoffswitch-switch"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="setings-item">
                    <span>
                        Offline users
                    </span>
                        <div class="switch">
                            <div class="onoffswitch">
                                <input type="checkbox" checked name="collapsemenu" class="onoffswitch-checkbox"
                                       id="example5">
                                <label class="onoffswitch-label" for="example5">
                                    <span class="onoffswitch-inner"></span>
                                    <span class="onoffswitch-switch"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="setings-item">
                    <span>
                        Global search
                    </span>
                        <div class="switch">
                            <div class="onoffswitch">
                                <input type="checkbox" checked name="collapsemenu" class="onoffswitch-checkbox"
                                       id="example6">
                                <label class="onoffswitch-label" for="example6">
                                    <span class="onoffswitch-inner"></span>
                                    <span class="onoffswitch-switch"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="setings-item">
                    <span>
                        Update everyday
                    </span>
                        <div class="switch">
                            <div class="onoffswitch">
                                <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="example7">
                                <label class="onoffswitch-label" for="example7">
                                    <span class="onoffswitch-inner"></span>
                                    <span class="onoffswitch-switch"></span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="sidebar-content">
                        <h4>Settings</h4>
                        <div class="small">
                            I belive that. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            And typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
                            the 1500s.
                            Over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<audio src="../music/orther.mp3" id="myaudio" controls="controls" hidden="true">
    <div th:include="common/Head :: js"></div>
    <script>

        window.onload=function(){
            $.get("/desktopSet/list" , function (r) {
                var divId;
                console.log(r)
                for (var i = 0; i < r.length; i++) {
                    $('#div' + r[i]).show();
                }

                if (r.Status == 0) {
                    var obj = document.getElementById('div1');
                    obj.className += ' styleclass'; // 注意前面加空格，防止两个属性挨在一起
                } else {
                }
            });

        }

        function autoPlay() {
            var myAuto = document.getElementById('myaudio');
            myAuto.play();
        }

        // 订单语音体系
        var playSound = function () {
            var borswer = window.navigator.userAgent.toLowerCase();
            if (borswer.indexOf("ie") >= 0) {
                //IE内核浏览器
                var strEmbed = '<embed name="embedPlay" src="../music/orther.mp3" autostart="true" hidden="true" loop="false"></embed>';
                if ($("body").find("embed").length <= 0)
                    $("body").append(strEmbed);
                var embed = document.embedPlay;

                //浏览器不支持 audion，则使用 embed 播放
                embed.volume = 100;
                //embed.play();这个不需要
            } else {
                //非IE内核浏览器
                var strAudio = "<audio id='audioPlay' src='../music/orther.mp3' hidden='true'>";

                if ($("#audioPlay").length <= 0) {
                    $("body").append(strAudio);
                }

                var audio = document.getElementById("audioPlay");

                //浏览器支持 audio
                audio.play();
            }
        }

        var socket;
        if (typeof (WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        } else {
            console.log("您的浏览器支持WebSocket");
            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            //等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
            socket = new WebSocket("ws://localhost:80/websocket/20");
            //socket = new WebSocket("ws://http://localhost:80/checkcenter/websocket/20");
            //  socket = new WebSocket("/checkcenter/websocket/20".replace("http","ws"));
            //打开事件
            socket.onopen = function () {
                console.log("Socket 已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function (msg) {


                if (msg.data == "连接成功") {

                } else {
                    toastr.options = {
                        closeButton: true,
                        progressBar: true,
                        showMethod: 'slideDown',
                        timeOut: 4000,
                        positionClass: "toast-top-right"
                    };
                    toastr.info("订单号【" + msg.data+"】","有新的订单已支付!");
                    autoPlay()
                    console.log(msg.data);
                }
                //发现消息进入    开始处理前端触发逻辑
            };
            //关闭事件
            socket.onclose = function () {
                console.log("Socket已关闭");
            };
            //发生了错误事件
            socket.onerror = function () {
                alert("Socket发生了错误");
                //此时可以尝试刷新页面
            }
        }


        $(document).ready(function () {


            $("#homePage").attr("class", "active");737
            $("#homePage_ul").attr("class", "nav nav-second-level collapse in");

            $("#homePage_1").attr("class", "active");


            setTimeout(function () {
                toastr.options = {
                    closeButton: true,
                    progressBar: true,
                    showMethod: 'slideDown',
                    timeOut: 4000,
                    positionClass: "toast-top-right"
                };
                toastr.success('Responsive Admin Theme', 'Welcome to INSPINIA');
            }, 1300);

            var data1 = [
                [0, 4], [1, 8], [2, 5], [3, 10], [4, 4], [5, 16], [6, 5], [7, 11], [8, 6], [9, 11], [10, 30], [11, 10], [12, 13], [13, 4], [14, 3], [15, 3], [16, 6]
            ];
            var data2 = [
                [0, 1], [1, 0], [2, 2], [3, 0], [4, 1], [5, 3], [6, 1], [7, 5], [8, 2], [9, 3], [10, 2], [11, 1], [12, 0], [13, 2], [14, 8], [15, 0], [16, 0]
            ];
            $("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
                    data1, data2
                ],
                {
                    series: {
                        lines: {
                            show: false,
                            fill: true
                        },
                        splines: {
                            show: true,
                            tension: 0.4,
                            lineWidth: 1,
                            fill: 0.4
                        },
                        points: {
                            radius: 0,
                            show: true
                        },
                        shadowSize: 2
                    },
                    grid: {
                        hoverable: true,
                        clickable: true,
                        tickColor: "#d5d5d5",
                        borderWidth: 1,
                        color: '#d5d5d5'
                    },
                    colors: ["#1ab394", "#1C84C6"],
                    xaxis: {},
                    yaxis: {
                        ticks: 4
                    },
                    tooltip: false
                }
            );

            var doughnutData = {
                labels: ["App", "Software", "Laptop"],
                datasets: [{
                    data: [300, 50, 100],
                    backgroundColor: ["#a3e1d4", "#dedede", "#9CC3DA"]
                }]
            };


            var doughnutOptions = {
                responsive: false,
                legend: {
                    display: false
                }
            };


            var ctx4 = document.getElementById("doughnutChart").getContext("2d");
            new Chart(ctx4, {type: 'doughnut', data: doughnutData, options: doughnutOptions});

            var doughnutData = {
                labels: ["App", "Software", "Laptop"],
                datasets: [{
                    data: [70, 27, 85],
                    backgroundColor: ["#a3e1d4", "#dedede", "#9CC3DA"]
                }]
            };


            var doughnutOptions = {
                responsive: false,
                legend: {
                    display: false
                }
            };


            var ctx4 = document.getElementById("doughnutChart2").getContext("2d");
            new Chart(ctx4, {type: 'doughnut', data: doughnutData, options: doughnutOptions});

        });
    </script>
    <script>
        (function (i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function () {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-4625583-2', 'webapplayers.com');
        ga('send', 'pageview');

    </script>
</body>
</html>
